<template>
<el-container class="default ">
 <div class="bg">
   <div class="login-form">
     <el-form :model="dataForm" status-icon :rules="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
       <el-row>
         <el-col>
           <h1 class="login-title">
             用户登录
           </h1>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
           <el-form-item label="用户名" prop="userName">
             <el-input type="text" placeholder="用户名" v-model="dataForm.userName" class="input-text" autocomplete="off"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col>
           <el-form-item label="密码" prop="password">
             <el-input type="password" placeholder="密码" v-model="dataForm.password" class="input-text" autocomplete="off"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :offset="6">
           <el-form-item>
             <el-button type="primary" v-loading="loading" @click="submit('ruleForm')">登录</el-button>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <Verify
         @success="success"
         :mode="'pop'"
         :captchaType="'blockPuzzle'"
         ref="verify"
     ></Verify>
   </div>
 </div>
</el-container>
</template>

<script>

import VueUtil from "@/util/VueUtil";
import Verify from "@/components/verifition/Verify"
export default {
  name: "login",
  components:{
    Verify
  },
  data(){
    return{
      dataForm:{
        userName:'',
        password:''
      },
      loading: false,
      ruleForm:{
        userName:[
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 64, message: '用户名长度为1 - 64个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 64, message: '密码长度为6 - 64个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    submit(){
      this.$refs.verify.show()
    },
    //验证码成功回调
    success(param){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          //验证码信息
          this.dataForm.captchaVO = this.$refs.verify.instance
          this.dataForm.captchaVO.captchaVerification = param.captchaVerification

          VueUtil(this).post('login',this.dataForm).then(res=>{
            if(res.code !== "100"){
              this.$message.error(res.message);
            }else{
              window.localStorage.setItem("user", JSON.stringify(res.data));
              window.localStorage.setItem("token", res.token);
              window.localStorage.setItem("menus",JSON.stringify(res.menu))
              window.localStorage.setItem("router",JSON.stringify(res.router))
              this.$store.commit('user/setUserData',window.localStorage.getItem("user"))
              this.$message.success(res.message);
              this.getRouter(res.router,'home');
              this.$router.push({name:'home'})
            }
            this.loading = false
          }).catch(()=>{
            this.loading = false
          })
        } else {

          return false;
        }
      });
    },
    getRouter(routerData,parentName){
      if(routerData){
        routerData.forEach(res=>{
            this.$router.addRoute(parentName,{
              path: '/'+res.path,
              name: res.componentName,
              meta: { keepAlive: true },
              component: () => import('@/'+res.component)
            })
          //this.getRouter(res.children,res.componentName)

        })

      }
    }
  }
}
</script>

<style scoped>

</style>
